var wrap = document.getElementById('wrap');
var mHead = document.getElementById('mHead');
var topMenu = document.getElementById('topMenu');
var head = document.getElementById('head');
var enlarge = document.getElementById('enlarge');
var preHistory = document.getElementById('pre');
var nextHistory = document.getElementById('next');
var preView = document.getElementById('preView');
var topMenuNumber = topMenu.getElementsByTagName('div');
var canvasBox = document.getElementById('canvasBox');
var canvas = document.getElementById('canvas');
var allColor = document.getElementById('allColor');
var controlBoard = byId('controlBoard');
var backgroundColorBoard = byId('backgroundColor');
var bgc = document.getElementById('bgc');
var nowColorElement = byId('nowColor');
var context = canvas.getContext('2d');
var canvasWidth;

var clientH;
var clientW;

var eachWidth;
var normalWidth;
var paddingLeft;
var paddingTop;

var backgroundColor = 'rgba(255,255,255,1)';
var nowColor = 'rgba(0,0,0,1)';
var preBlock = new Block(nowColor, 0, 0, false);
var timer = null;
var isMousedown = false;
var isBiggerOn = false;
var isMoveCanvas = false;
var mouseX,mouseY,preMouseX,preMouseY;
var canvasMoveTop;
var canvasMoveLeft;
var style = canvas.currentStyle || window.getComputedStyle(canvas);
var moveX = 0,canMoveColorBar = false;
var magnification = 2;
var isClear = false;
var isUpload = false;
var isSaved = false;
var isMoveButtonDown = false;
var isBgc = false;
var isPencilButtonDown = true;
var isEraserButtonDown = false;
var isClickP = false;
var isClickN = false;

var allColorName = [
    'rgba(0,0,0,1)',
    'rgba(255,255,255,1)',
    'rgba(100,100,100,1)',
    'rgba(236,50,35,1)',
    'rgba(0,255,0,1)',
    'rgba(0,0,255,1)',
    'rgba(255,73,2,1)',
    'rgba(162,40,40,1)',
    'rgba(203,146,53,1)',
    'rgba(196,64,64,1)',
    'rgba(196,93,93,1)',
    'rgba(236,135,135,1)',
    'rgba(215,144,158,1)',
    'rgba(255,254,84,1)',
    'rgba(113,250,76,1)',
    'rgba(113,251,253,1)',
    'rgba(70,117,187,1)',
    'rgba(79,170,6,1)',

    'rgba(95,157,249,1)',
    'rgba(184,166,42,1)',
    'rgba(245,222,62,1)',
    'rgba(110,47,113,1)',
    'rgba(114,75,167,1)',
    'rgba(1,30,244,1)',
    'rgba(133,35,126,1)',
    'rgba(243,146,59,1)'

];
var backgroundGroup = [
    'rgba(255, 255, 255, 1)',
    'rgba(153, 153, 153, 1)',
    'rgba(0, 255, 30, 1)'
];
var nowBcg = 0;

var blockList = [];
var history = [];
var nowStatus,allStatus;
var allBtn = controlBoard.getElementsByTagName('div');
var bottomBtnUnactiveImg = [
    '../static/images/hand.gif',
    '../static/images/bg-white.gif',
    '',
    '../static/images/pen.gif',
    '../static/images/eraser.gif'
]

initBlockList();
getView();
for(var i=0;i<allBtn.length;i++){
    allBtn[i].isActive = false;
    allBtn[i].unActiveImage = bottomBtnUnactiveImg[i];
}

startMove(document.body,{'opacity':100});



if(detectmob()){
    
    canvas.addEventListener('touchstart',function (e) {
        //alert('start:'+e.touches.length)
        //isMousedown = true;
        if(e.touches.length === 2){
            //scrollChangeCanvas(e);
        }
        else if(e.touches.length === 1){
            isMousedown = true;
            if(allBtn[0].isActive){
                preMouseX = mouseX;
                preMouseY = mouseY;
            }
            else{
                
                start(e);
            }
        }

    });
    canvas.addEventListener('touchmove',function (e) {
        if(e.touches.length === 2){

        }
        else if(e.touches.length === 1){
            mouseX = e.touches[0].clientX;
            mouseY = e.touches[0].clientY;
            //alert('mouseX:'+mouseX+', mouseY'+mouseY)
            //alert('top:'+canvas.offsetTop+', mouseY'+canvas.offsetLeft)
            if(allBtn[0].isActive && isMousedown){

                canvasMoveTop = e.touches[0].clientY - preMouseY+parseInt(style.marginTop);
                canvasMoveLeft = e.touches[0].clientX - preMouseX+parseInt(style.marginLeft);
                if(canvasMoveTop<=-(eachWidth*32-canvasBox.offsetHeight)){
                    canvasMoveTop = -(eachWidth*32-canvasBox.offsetHeight);
                }
                else if(canvasMoveTop >=0){
                    canvasMoveTop = 0;
                }
                if(canvasMoveLeft<=-(eachWidth*32-canvasBox.offsetHeight)){
                    canvasMoveLeft = -(eachWidth*32-canvasBox.offsetHeight);
                }
                else if(canvasMoveLeft >=0){
                    canvasMoveLeft = 0;
                }
                else{

                }
                canvas.style.marginTop = canvasMoveTop+'px ';
                canvas.style.marginLeft = canvasMoveLeft+'px ';
                preMouseX = e.touches[0].clientX;
                preMouseY = e.touches[0].clientY;
                paddingLeft = canvas.offsetLeft-document.body.scrollLeft+wrap.offsetLeft;
                paddingTop = canvas.offsetTop-document.body.scrollTop+wrap.offsetTop;
            }
            else if(isMousedown && !allBtn[0].isActive){
                move(e);
            }
        }

    });
    canvas.addEventListener('touchend',function (e) {
        isMousedown = false;
        //alert(isMousedown)
        //alert('top:'+canvas.offsetTop+', left'+canvas.offsetLeft)
        history[nowStatus] =[];
        for(var i=0;i<32;i++){
            history[nowStatus][i] = [];
            for(var j=0;j<32;j++){
                history[nowStatus][i][j] = new Block(blockList[i][j].color, blockList[i][j].x, blockList[i][j].y, blockList[i][j].isBackgroundColor);
            }
        }
        getPreView();
    });//成功了
    //alert(document.getElementById('colorBox'))
    if(document.getElementById('colorBox')){
        var colorBox = document.getElementById('colorBox');
        //alert('ok')
        colorBox.addEventListener('touchstart',function (ev) {
            canMoveColorBar = true;
            moveX = ev.touches[0].clientX;
            if(this.offsetLeft>0){
                this.style.left = 0;
                //canMoveColorBar = false;
            }
            else if(this.offsetLeft < -(4*(allColorName.length+2)+allColorName.length*(canvasBox.offsetHeight/10))-allColor.offsetWidth){
                this.style.left = -(4*(allColorName.length+2)+allColorName.length*(canvasBox.offsetHeight/10))-allColor.offsetWidth+'px';
                //canMoveColorBar = false;
            }
            else{

            }
            // document.getElementById('location').innerHTML = ev.touches[0].clientX+', '+moveX;
            // document.getElementById('location').style.color = '#fff';
        });
        colorBox.addEventListener('touchmove',function (ev) {
            var event = event || ev;
            //event.preventDefault();
            var movedX = ev.touches[0].clientX;
            var v = movedX-moveX;

            //alert(1)
            if(canMoveColorBar){
                if(this.offsetLeft+v>=0){
                    this.style.left = 0;
                    //canMoveColorBar = false;
                }
                else if(this.offsetLeft+v <= -(4*(allColorName.length+2)+allColorName.length*(canvasBox.offsetHeight/10))+allColor.offsetWidth){
                    this.style.left = -(4*(allColorName.length+2)+allColorName.length*(canvasBox.offsetHeight/10))+allColor.offsetWidth+'px';
                    //canMoveColorBar = false;
                }
                else{
                    this.style.left = this.offsetLeft + v +'px';
                }
            }
            //console.log(movedX);
            moveX = movedX;

        });
        colorBox.addEventListener('touchend',function (ev) {
            canMoveColorBar = false;
        });
        // colorBox.addEventListener('mouseout',function (ev) {
        //     canMoveColorBar = false;
        // });
    }
    else{
        //alert('no')
    }
}
else {
    preHistory.getElementsByTagName('img')[0].style.margin = '25% 12%';
    nextHistory.getElementsByTagName('img')[0].style.margin = '25% 12%';
    canvas.addEventListener('mousedown',function (e) {
    if(e.button === 0){
        isMousedown = true;
        if(allBtn[0].isActive){
            preMouseX = mouseX;
            preMouseY = mouseY;
        }
        else{
            
            start(e);
        }
        
    }
    });
    canvas.addEventListener('mousemove',function (e) {
        mouseX = e.clientX;
        mouseY = e.clientY;
        //console.log('mouseX:'+mouseX+', mouseY'+mouseY)
        if(allBtn[0].isActive && isMousedown){

            canvasMoveTop = e.clientY - preMouseY+parseInt(style.marginTop);
                canvasMoveLeft = e.clientX - preMouseX+parseInt(style.marginLeft);
                if(canvasMoveTop<=-(eachWidth*32-canvasBox.offsetHeight)){
                    canvasMoveTop = -(eachWidth*32-canvasBox.offsetHeight);
                }
                else if(canvasMoveTop >=0){
                    canvasMoveTop = 0;
                }
                if(canvasMoveLeft<=-(eachWidth*32-canvasBox.offsetHeight)){
                    canvasMoveLeft = -(eachWidth*32-canvasBox.offsetHeight);
                }
                else if(canvasMoveLeft >=0){
                    canvasMoveLeft = 0;
                }
                else{

                }
                // canvas.style.marginTop = canvasMoveTop+'px ';
                // canvas.style.marginLeft = canvasMoveLeft+'px ';
                // canvasMoveTop = mouseY - preMouseY+parseInt(style.marginTop);
                // canvasMoveLeft = mouseX - preMouseX+parseInt(style.marginLeft);
                // if(canvasMoveTop<=-(eachWidth*32-canvasBox.offsetHeight)){
                //     canvasMoveTop = -(eachWidth*32-canvasBox.offsetHeight);
                // }
                // else if(canvasMoveTop >=0){
                //     canvasMoveTop = 0;
                // }
                // if(canvasMoveLeft<=-(eachWidth*32-canvasBox.offsetHeight)){
                //     canvasMoveLeft = -(eachWidth*32-canvasBox.offsetHeight);
                // }
                // else if(canvasMoveLeft >=0){
                //     canvasMoveLeft = 0;
                // }
                // else{

                // }

                canvas.style.marginTop = canvasMoveTop+'px ';
                canvas.style.marginLeft = canvasMoveLeft+'px ';
                preMouseX = mouseX;
                preMouseY = mouseY;
                paddingLeft = canvas.offsetLeft-document.body.scrollLeft+wrap.offsetLeft;
                paddingTop = canvas.offsetTop-document.body.scrollTop+wrap.offsetTop;
                preMouseX = e.clientX;
                preMouseY = e.clientY;
        }
        else if(isMousedown && !allBtn[0].isActive){
            move(e);
        }
    });
    canvas.addEventListener('mouseover',function (e) {
        isBiggerOn = true;
        mouseX = e.clientX;
        mouseY = e.clientY;
        //console.log('mouseX:'+mouseX+', mouseY'+mouseY)
    });
    canvasBox.addEventListener('mouseover',function (e) {
        isBiggerOn = true;
        mouseX = e.clientX;
        mouseY = e.clientY;
        //console.log('mouseX:'+mouseX+', mouseY'+mouseY)
    });
    canvas.addEventListener('mouseout',function (e) {
        isBiggerOn = false;
    });
    canvas.addEventListener('mouseup',function (e) {
        isMousedown = false;
        //isMoveCanvas = false;
        history[nowStatus] =[];
        for(var i=0;i<32;i++){
            history[nowStatus][i] = [];
            for(var j=0;j<32;j++){
                history[nowStatus][i][j] = new Block(blockList[i][j].color, blockList[i][j].x, blockList[i][j].y, blockList[i][j].isBackgroundColor);
            }
        }
        
        getPreView();
    });
    document.body.addEventListener('mouseup',function (e) {
        isMousedown = false;
        isMoveCanvas = false;
        canMoveColorBar = false;
    });

    if(document.getElementById('colorBox')){
        var colorBox = document.getElementById('colorBox');

        colorBox.addEventListener('mousedown',function (ev) {
            canMoveColorBar = true;
            //alert(this.offsetLeft)
            //moveX = ev.clientX;
            if(this.offsetLeft>0){
                this.style.left = 0;
                //canMoveColorBar = false;
            }
            else if(this.offsetLeft < -(4*(allColorName.length+2)+allColorName.length*(canvasBox.offsetHeight/10))-allColor.offsetWidth){
                this.style.left = -(4*(allColorName.length+2)+allColorName.length*(canvasBox.offsetHeight/10))-allColor.offsetWidth+'px';
                //canMoveColorBar = false;
            }
            else{

            }
        });
        colorBox.addEventListener('mousemove',function (ev) {
            var event = event || ev;
            event.preventDefault();
            var movedX = ev.clientX-wrap.offsetLeft;
            var v = movedX-moveX;
            if(canMoveColorBar){
                if(this.offsetLeft+v>=0){
                    this.style.left = 0;
                    //canMoveColorBar = false;
                }
                else if(this.offsetLeft+v <= -(4*(allColorName.length+2)+allColorName.length*(canvasBox.offsetHeight/10))+allColor.offsetWidth){
                    this.style.left = -(4*(allColorName.length+2)+allColorName.length*(canvasBox.offsetHeight/10))+allColor.offsetWidth+'px';
                    //canMoveColorBar = false;
                }
                else{
                    this.style.left = this.offsetLeft + v +'px';
                }
            }
            //console.log(movedX);
            moveX = movedX;

        });
        colorBox.addEventListener('mouseup',function (ev) {
            canMoveColorBar = false;
        });
    }
}
// enlarge.addEventListener('change', function(){
//     magnification = this.value;
//     isBiggerOn = true;
//     scrollChangeCanvas(magnification);
// });

preHistory.addEventListener('click',function (e) {
    isClickP = true;
    historyGo(-1);
});
nextHistory.addEventListener('click',function (e) {
    isClickN = true;
    historyGo(1);
});
bgc.addEventListener('click', function(){
        
        nowBcg++;
        nowBcg = nowBcg>2 ? 0 : nowBcg;
        backgroundColor = backgroundGroup[nowBcg];
        for(var i=0;i<32;i++){
            for(var j=0;j<32;j++){
                if(blockList[i][j].isBackgroundColor){
                    blockList[i][j].color = backgroundColor;
                }
                else{

                }
            }
        }
        for(var i=0;i<=allStatus;i++){
            for(var j=0;j<32;j++){
                for(var k=0;k<32;k++){
                    if(history[i][j][k].isBackgroundColor)
                    history[i][j][k].color = backgroundColor;
                }
            }
        }

        drawEachBlock(history[nowStatus]);
        getPreView();
        this.style.backgroundColor = backgroundColor;

    });
window.onresize = function () {
    getView();
};
window.onscroll = function (ev) {
    paddingLeft = canvas.offsetLeft-document.body.scrollLeft+wrap.offsetLeft;
    paddingTop = canvas.offsetTop-document.body.scrollTop+wrap.offsetTop;
};
function getView() {
    clientH = document.documentElement.clientHeight;
    clientW = document.documentElement.clientWidth;
    wrap.style.height = clientH +'px';
    wrap.style.width = clientW < clientH * 0.75 ? clientW+'px' : clientH*0.6+'px';
    mHead.style.height = clientH*0.064+'px';
    topMenu.style.height = clientH*0.082+'px';
    head.style.height = clientH*0.124+'px';
    var canvasBoxHeight = clientH*0.566;

    for(var i=0;i<topMenuNumber.length;i++){
        topMenuNumber[i].style.height = topMenu.offsetHeight*0.8+'px';
        topMenuNumber[i].style.width = topMenu.offsetHeight*0.8+'px';
        topMenuNumber[i].style.margin = topMenu.offsetHeight*0.08+'px ';// +topMenu.offsetHeight*0.22+'px';
    }
    // topMenuNumber[2].style.height = topMenu.offsetHeight*0.5+'px';
    // topMenuNumber[2].style.width = topMenu.offsetHeight*0.5+'px';
    // topMenuNumber[2].style.margin = topMenu.offsetHeight*0.25+'px ';
    topMenuNumber[2].style.height = topMenu.offsetHeight*0.45+'px';
    topMenuNumber[2].style.width = topMenu.offsetHeight*0.45+'px';
    topMenuNumber[2].style.margin = topMenu.offsetHeight*0.25+'px ';
    //head.style.height = clientH*0.12+'px';

    preView.style.height = head.offsetHeight*0.68+'px';
    preView.style.marginTop = head.offsetHeight*0.15+'px';
    //preView.innerHTML = '<img src="http://www.91danji.com/attachments/201408/27/10/37isb46ow.png" />';
    if(canvasBoxHeight >= wrap.offsetWidth){
        canvasBoxHeight = wrap.offsetWidth;
        console.log(canvasBoxHeight+', '+wrap.offsetWidth)
    }
    canvasWidth = 0 === canvasBoxHeight % 32 ? canvasBoxHeight - 32 : canvasBoxHeight - canvasBoxHeight % 32 - 32;
    canvasBox.style.width = canvasWidth+'px';
    canvasBox.style.height = canvasWidth+'px';
    allColor.style.marginTop = clientH*0.02+'px';
    allColor.style.height = clientH*0.075+'px';
    controlBoard.style.height = clientH*0.11+'px';
    backgroundColorBoard.style.height = bgc.offsetWidth+'px';
    nowColorElement.style.width = clientH*0.055+'px';
    nowColorElement.style.height = clientH*0.055+'px';

    canvas.width = canvasWidth;
    canvas.height = canvasWidth;

    eachWidth = (canvasWidth / 32);
    normalWidth = eachWidth;
    paddingLeft = canvas.offsetLeft - document.body.scrollLeft+wrap.offsetLeft;
    paddingTop = canvas.offsetTop - document.body.scrollTop+wrap.offsetTop;

    drawEachBlock(history[nowStatus]);
    getPreView();
    initColor();
}
function start(e) {
    var event = e.touches !== undefined ? e.touches[0] : e;
    var startX = (event.clientX-paddingLeft) < 0 ? 0 : (event.clientX-paddingLeft)>canvas.width ? canvas.width : (event.clientX-paddingLeft);
    var startY = (event.clientY-paddingTop) < 0 ? 0 : (event.clientY-paddingTop)>canvas.width ? canvas.width : (event.clientY-paddingTop);
    
    var nowBlockX = parseInt(startX/eachWidth);
    var nowBlockY = parseInt(startY/eachWidth);
    if(nowStatus !== allStatus){
        for(var i=0;i<32;i++){
            for(var j=0;j<32;j++){
                blockList[i][j] = new Block(history[nowStatus][i][j].color, history[nowStatus][i][j].x, history[nowStatus][i][j].y, history[nowStatus][i][j].isBackgroundColor);
            }
        }
    }
    nowStatus++;
    allStatus = nowStatus;
    blockList[nowBlockX][nowBlockY].color = nowColor;
    blockList[nowBlockX][nowBlockY].isBackgroundColor = false;
    preBlock = new Block(nowColor,nowBlockX,nowBlockY, false);

    drawEachBlock(blockList);
}
function move(e) {
    clearTimeout(timer);
    var event = e.touches !== undefined ? e.touches[0] : e;
    var moveX = (event.clientX-paddingLeft) < 0 ? 0 : (event.clientX-paddingLeft)>canvas.width ? canvas.width : (event.clientX-paddingLeft);
    var moveY = (event.clientY-paddingTop) < 0 ? 0 : (event.clientY-paddingTop)>canvas.width ? canvas.width : (event.clientY-paddingTop);
    var nowBlockX = parseInt(moveX/eachWidth);
    var nowBlockY = parseInt(moveY/eachWidth);
    if(nowBlockX !== preBlock.x || nowBlockY !== preBlock.y){
        checkBlockIsAccessed(preBlock.x,preBlock.y,nowBlockX,nowBlockY);
        blockList[nowBlockX][nowBlockY].color = nowColor;
        blockList[nowBlockX][nowBlockY].isBackgroundColor = false;
        preBlock.x = nowBlockX;
        preBlock.y = nowBlockY;

        drawEachBlock(blockList);
    }
}
function scrollChangeCanvas(magnification) {
    // var fromCenter = e.fromCenter || false;
    // var detail = e.deltaY || e.detail;
    if(isBiggerOn && nowStatus !== 0){
        //console.log('changed'+magnification)
        if(eachWidth < normalWidth){
            eachWidth =normalWidth;
            canvas.width = eachWidth*32;
            canvas.height = eachWidth*32;
            canvas.style.margin = '0';
            drawEachBlock(history[nowStatus]);
        }
        else{
            eachWidth = Math.round(magnification * normalWidth/2);
            canvas.width = eachWidth*32;
            canvas.height = eachWidth*32;
            canvasMoveTop = parseInt(style.marginTop)+(normalWidth*16);
            canvasMoveLeft = parseInt(style.marginLeft)+(normalWidth*16);
            if(canvasMoveTop<=-(eachWidth*32-canvasBox.offsetHeight)){
                canvasMoveTop = -(eachWidth*32-canvasBox.offsetHeight);
            }
            else if(canvasMoveTop >=0){
                canvasMoveTop = 0;
            }
            if(canvasMoveLeft<=-(eachWidth*32-canvasBox.offsetHeight)){
                canvasMoveLeft = -(eachWidth*32-canvasBox.offsetHeight);
            }
            else if(canvasMoveLeft >=0){
                canvasMoveLeft = 0;
            }
            canvas.style.marginTop = canvasMoveTop+'px ';
            canvas.style.marginLeft = canvasMoveLeft+'px ';
            drawEachBlock(history[nowStatus]);
        }
        
    }
    paddingLeft = canvas.offsetLeft-document.body.scrollLeft+wrap.offsetLeft;
    paddingTop = canvas.offsetTop-document.body.scrollTop+wrap.offsetTop;
}
function getPreView() {
    preView.getElementsByTagName('img')[0].src = canvas.toDataURL();
}
function drawWhiteBord(){
    context.fillStyle = "rgba(255,255,255,1)";
    context.fillRect(0,0,canvas.width,canvas.height);
}
function initBlockList(){
    for(var i=0;i<32;i++){
        blockList[i] = [];
        for(var j=0;j<32;j++){
            blockList[i][j] = new Block(backgroundColor, i, j, true);
        }
    }
    nowStatus = 0;
    allStatus = nowStatus;
    history[nowStatus] =[];
    for(var i=0;i<32;i++){
        history[nowStatus][i] = [];
        for(var j=0;j<32;j++){
            history[nowStatus][i][j] = new Block(blockList[i][j].color, blockList[i][j].x, blockList[i][j].y, blockList[i][j].isBackgroundColor);
        }
    }

}
function drawEachBlock(List){
    drawWhiteBord();
    var i,j;
    for(i = 0;i<32;i++){
        for(j = 0;j<32;j++) {
            context.fillStyle = List[i][j].color;
            context.fillRect(List[i][j].x * eachWidth, List[i][j].y * eachWidth, eachWidth, eachWidth);
        }
    }
    if(nowStatus === 0){
            preHistory.getElementsByTagName('img')[0].src = '../static/images/unback.gif';
        }
        else{
            preHistory.getElementsByTagName('img')[0].src = '../static/images/back.gif';
        }
        if(nowStatus === allStatus){
            nextHistory.getElementsByTagName('img')[0].src = '../static/images/unback.gif';
        }
        else{
            nextHistory.getElementsByTagName('img')[0].src = '../static/images/back.gif';
        }
}
function Block(color,x,y,isBackgroundColor){
    this.color = color;
    this.x = x;
    this.y = y;
    this.isBackgroundColor = isBackgroundColor;
    this.isAccessed = function(x1,y1,x2,y2){
        if(x1 !== x2 && y1!== y2){
            var leftFxY = (this.x-x2)*(y1-y2)/(x1-x2)+y2;
            var rightFxY = (this.x+1-x2)*(y1-y2)/(x1-x2)+y2;
            var topFxX  = (this.y-y2)*(x1-x2)/(y1-y2)+x2;
            var bottomFxX  = (this.y+1-y2)*(x1-x2)/(y1-y2)+x2;
            if(leftFxY>this.y && leftFxY<this.y+1 || rightFxY>this.y && rightFxY <this.y+1 || topFxX>this.x && topFxX<this.x+1 || bottomFxX>this.x && bottomFxX<this.x+1){
                return true;
            }
        }
        else if(x1 === x2){
            if(x1>=this.x && x1<=this.x+1) return true;
        }
        else if(y1 === y2){
            if(y1>=this.y && y1<=this.y+1) return true;
        }
        return false;
    }
}

function checkBlockIsAccessed(areaX1,areaY1,areaX2,areaY2){
    var minX,maxX,minY,maxY;
    minX = areaX1>areaX2 ? areaX2 : areaX1;
    maxX = areaX1>areaX2 ? areaX1 : areaX2;
    minY = areaY1>areaY2 ? areaY2 : areaY1;
    maxY = areaY1>areaY2 ? areaY1 : areaY2;

    for(var i=minX;i<=maxX;i++){
        for(var j=minY;j<=maxY;j++){
            if(blockList[i][j].isAccessed(areaX1,areaY1,areaX2,areaY2)){
                blockList[i][j].color = nowColor;
                blockList[i][j].isBackgroundColor = false;
            }
            else {
                //blockList[i][j].color = "#00ff00";
            }
        }
    }

}
function initColor(){
    var colorSpan;
    colorSpan = '<div id="allColors">';
    for(var i=1;i<allColorName.length;i++){
        colorSpan += '<div class="floatColor"></div>';
    }
    colorSpan += '</div>';
    colorSpan += '<div id="colorBox"><div class="active eachColor"></div>';
    for(var i=1;i<allColorName.length;i++){
        colorSpan += '<div class="eachColor"></div>';
    }
    allColor.innerHTML = colorSpan+'</div>';
    var allColors = byId('allColors');
    var colorBox = document.getElementById('colorBox');
    colorBox.style.width = (4*(allColorName.length+2)+allColorName.length*(allColor.offsetHeight*0.7))+'px';
    //alert((4*(allColorName.length-1)+allColorName.length*(allColor.offsetHeight*0.7)))
    //alert(allColors.offsetHeight*0.7)
    //alert(allColorName.length+','+((allColor.offsetHeight*0.7+4)*25+4))
    var allcolors = allColors.getElementsByTagName('div');
    //alert(allcolors.length)
    var colors = colorBox.getElementsByTagName('div');
    //alert(colors.length)
    for(var i=0;i<colors.length;i++){
        colors[i].style.background = allColorName[i];
        colors[i].style.width = allColor.offsetHeight*0.7+'px';
        colors[i].style.height = allColor.offsetHeight*0.7+'px';
        colors[i].style.left = 4*(i+1) + (allColor.offsetHeight*0.7)*i+'px';
        colors[i].style.top = allColor.offsetHeight*0.1+'px';
        colors[i].onclick = function(i){
            return function (e) {
                var event = event || e;
                isEraserButtonDown = false;
                byId('eraser').style.border = 'none';
                event.preventDefault();
                nowColor = allColorName[i];
                byId('c').style.backgroundColor = nowColor;
                colors[i].className = "active eachColor";
                colors[i].style.width = allColor.offsetHeight*0.7-2+'px';
                colors[i].style.height = allColor.offsetHeight*0.7-2+'px';
                for(var j=0;j<allColorName.length;j++){
                    if(j!==i){
                        colors[j].className = "eachColor";
                        colors[j].style.width = allColor.offsetHeight*0.7+'px';
                        colors[j].style.height = allColor.offsetHeight*0.7+'px';
                    }
                }
            }
        }(i);

    }
}
function historyGo(to) {
    if(to === 1){
        if(nowStatus<allStatus){
            nowStatus++;
            
            drawEachBlock(history[nowStatus]);
        }
    }
    else if(to === -1){
        if(nowStatus>0){
            nowStatus--;
            
            drawEachBlock(history[nowStatus]);
        }
    }
    else{
        console.log("error to");
    }
    getPreView();
}
function byId(objName){
    return document.getElementById(objName);
}